<template lang="">
  <!-- 组件递归--- -->
  <!-- 组件递归- 事件买票 -给 menuitem  和 submenu 都添加了 点击事件，最终出发的 是  submenu的点击事件 -->
  <template v-for="(item, index) in data" :key="index + ''">
    <!-- 判断--盘item是否有children属性，如果有 生成 el-sub-menu -->
    <!-- 如果诶呦children属性 生成 el-menuitem -->
    <el-sub-menu v-if="item.children" :index="item.path">
      <template #title>
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 内层遍历 children   -->
      <!-- *****一个组件是可以自己调用自己（不需要引入，只需要 用组件自己的文件名）----- 组件递归 -->
      <MyMenuItem :data="item.children"></MyMenuItem>
      <!-- 级的跳转  -->
    </el-sub-menu>
    <!-- 一级的跳转  -->
    <!-- 使用跳转路由当做 index --让index 唯一 点击谁 谁有选中样式 -->
    <el-menu-item v-else :index="item.path" @click="fn(item)">
      <el-icon>
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
  </template>
</template>
<script>
export default {
  props: ["data"],
  mounted() {
    // console.log(this.data)
  },
  methods: {
    fn(v) {
      // debugger
      // console.log(v.path)
      // this.$router.push({ name: v.name })
      // this.$router.push({ path: v.path })
      this.$router.push({ path: v.path })
      // console.log(this.$router)
    }
  }
}
</script>
<style lang=""></style>
